<template>
  <div>
    <div class="home_container">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
        <van-swipe-item v-for="item in swiperList" :key="item.id">
          <img :src="item.imgSrc" style="width: 100%" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图下面的导航 -->
      <!-- 图片导航 -->
      <van-row gutter="8">
        <van-col span="6">
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            src=""
          />
          <p class="song_name">整租</p>
        </van-col>
        <van-col span="6">
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            src=""
          />
          <p class="song_name">合租</p>
        </van-col>
        <van-col span="6" @click="$router.push('/map')">
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            src=""
          />
          <p class="song_name">地图找房</p>
        </van-col>
        <van-col span="6" @click="$router.push('/rent/add')">
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            src=""
          />
          <p class="song_name">去出租</p>
        </van-col>
      </van-row>
    </div>
    <van-search
      v-model="value"
      placeholder="请输入小区或地址"
      @search="onSearch"
      style="font-size: 10px"
      color="#9c9fa1"
      show-action
    >
      <template #left>
        <div class="area"  style="color: #666666" @click="goCity">
          <span style="font-size: 13px" >上海 </span>
          <van-icon name="arrow-down" color="#666666" ></van-icon>
        </div>
      </template>
      <template #action>
        <van-icon name="map-marked" class="nav_map" ></van-icon>
      </template>
    </van-search>
  </div>
</template>

<script>
import { swiperApi } from '@/api'

export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      swiperList: [],
      value: ''
    }
  },

  async created () {
    const res = await swiperApi()
    console.log(res)
    this.swiperList = res.data.body
    res.data.body.forEach((item) => {
      item.imgSrc = 'http://liufusong.top:8080' + item.imgSrc
    })
    this.swiperList = res.data.body
  },
  methods: {
    goCity () {
      console.log(111)
      this.$router.push('/city')
    },
    onSearch () {}
  }
}
</script>
<style scoped>
.home_container {
  padding-bottom: 50px;
}
/* 底部导航上边框 */
.van-tabbar {
  border-top: 1px solid #f8f8f8;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 212px;
}
.van-row {
  margin-top: 15px;
  padding-left: 10px;
}
.van-col {
  font-size: 14px;
  text-align: center;
}
.van-search {
  position: fixed;
  top: 20px;
  left: 15px;
  width: 310px;
  height: 34px;
}
.area {
  border-right: 1px solid #9c9fa1;
  padding-right: 10px;
}
.nav_map {
  color: rgb(203, 28, 28);
}
</style>
